.{$tooltip-prefix}, .{$tooltip-prefix}-inner
  max-width 500px
  background $dark-color
  color white
  border-radius 3px
  text-align left
.{$tooltip-prefix}
  display none
  position absolute
  opacity 0
  &.{$tooltip-prefix}-white
    .{$tooltip-prefix}-inner
      background-color $white-color
      color $dark-color
      box-shadow 0 2px 10px 0 rgba($dark-color, 0.15)
    .{$tooltip-prefix}-arrow
      border-color $white-color
  .{$tooltip-prefix}-arrow
    position absolute
    width 0
    height 0
    margin 5px
    border-style solid
    border-color $dark-color
  .{$tooltip-prefix}-inner
    padding 4px 10px
&[aria-hidden='false']
  display block
  opacity 1
.{$tooltip-prefix}[x-placement^='top']
  margin-bottom 5px
.{$tooltip-prefix}[x-placement^='top']
  .{$tooltip-prefix}-arrow
    border-width 5px 5px 0 5px
    border-bottom-color transparent
    border-left-color transparent
    border-right-color transparent
    bottom -5px
    left calc(50% - 5px)
    margin-top 0
    margin-bottom 0
.{$tooltip-prefix}[x-placement^='bottom']
  margin-top 5px
.{$tooltip-prefix}[x-placement^='bottom']
  .{$tooltip-prefix}-arrow
    border-width 0 5px 5px 5px
    border-top-color transparent
    border-left-color transparent
    border-right-color transparent
    top -5px
    left calc(50% - 5px)
    margin-top 0
    margin-bottom 0
.{$tooltip-prefix}[x-placement^='right']
  margin-left 5px
.{$tooltip-prefix}[x-placement^='right']
  .{$tooltip-prefix}-arrow
    border-width 5px 5px 5px 0
    border-top-color transparent
    border-bottom-color transparent
    border-left-color transparent
    left -5px
    top calc(50% - 5px)
    margin-left 0
    margin-right 0
.{$tooltip-prefix}[x-placement^='left']
  margin-right 5px
.{$tooltip-prefix}[x-placement^='left']
  .{$tooltip-prefix}-arrow
    border-width 5px 0 5px 5px
    border-top-color transparent
    border-bottom-color transparent
    border-right-color transparent
    right -5px
    top calc(50% - 5px)
    margin-left 0
    margin-right 0
